<template>
    <view class="">
        <view class="task-card">
            <view class="pickup-warehouse">
                <view class="box-top">
                    <text class="pickup-tag" v-if="state != 4">取</text>
                    <text class="warehouse-name flex-fill">{{ data.repositoryName }}</text>
                    <view class="btn-change-warehouse touch" @click="changeFn(state)">
                        <text class="text-icon icon-change"></text>
                        <text class="btn-text">切换</text>
                    </view>
                </view>
                <view class="box-bottom">
                    <text class="warehouse-address">{{ data.address }}</text>
                    <text class="text-icon icon-lbs touch" @click.stop="gotoMap"></text>
                    <text class="text-icon icon-tel touch" @click.stop="makePhoneCall(data.linkPhone)"></text>
                </view>
            </view>

            <text class="task-text" v-if="state != 4">共{{ length }}个订单待处理</text>
        </view>
    </view>
</template>

<script>
import { toMapAPP } from "@/uni-sub-base/utils/mapUtil"
export default {
    props: {
        state: {
            type: Number,
            default: 0,
        },
        data: {
            type: Object,
            default: () => {},
        },
        length: {
            type: Number,
            default: 0,
        },
    },
    data() {
        return {}
    },
    mounted() {},
    onShow() {},
    methods: {
        changeFn(state) {
            this.$emit("changeFn", state)
        },
        gotoMap() {
            //#ifdef APP-PLUS
            let lat = 0,
                lng = 0,
                name = ""
            lat = this.data.latitude
            lng = this.data.longitude
            name = this.data.repositoryName
            console.log(lat, lng, name)
            toMapAPP(lat, lng, name)
            // #endif
            // #ifndef APP-PLUS
            this.easyToast("请在app中使用导航功能")
            //#endif
        },
    },
}
</script>

<style lang="scss">
.task-card {
    background: #e9ebf0;
    border-radius: 16rpx;
    .pickup-warehouse {
        display: flex;
        background: linear-gradient(135deg, #08a6ff 0%, #0060ff 100%);
        border-radius: 16rpx;
        padding: 34rpx $app-page-padding 44rpx;
        flex-direction: column;

        .box-top {
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-bottom: 30rpx;
        }

        .box-bottom {
            display: flex;
            flex-direction: row;
            align-items: center;
        }

        .warehouse-name {
            color: $color-white;
            font-size: $font-size-36;
            font-weight: bold;
        }

        .btn-change-warehouse {
            width: 148rpx;
            height: 56rpx;
            background: $color-white;
            box-shadow: 0 4rpx 8rpx 0 rgba(0, 23, 94, 0.5);
            border-radius: $font-size-32;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;

            .icon-change {
                width: 32rpx;
                height: 32rpx;
                background-image: url(@/pages_tms/static/icon/icon_btn_change.png);
                margin-right: 8rpx;
            }

            .btn-text {
                color: $app-color-main-tms;
            }
        }

        .warehouse-address {
            color: $color-white;
            flex: 1;
            font-size: $font-size-28;
        }

        .icon-lbs {
            width: 48rpx;
            height: 48rpx;
            margin-left: 26rpx;
            background-image: url(@/pages_tms/static/icon/icon_card_lbs.png);
        }

        .icon-tel {
            width: 48rpx;
            height: 48rpx;
            margin-left: 40rpx;
            margin-right: 10rpx;
            background-image: url(@/pages_tms/static/icon/icon_card_tel.png);
        }

        .pickup-tag {
            width: 48rpx;
            height: 48rpx;
            background: $color-white;
            border-radius: 48rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            color: $color-tms-blue-1;
            font-weight: bold;
            margin-right: 10rpx;
        }
    }

    .task-text {
        display: flex;
        font-size: $font-size-32;
        font-weight: bold;
        padding: $app-page-padding;
    }
}
</style>
